<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/head"></head>
<title>分类管理</title>
<link rel="stylesheet" th:href="@{/admin/css/category.css}">
<body>
<!-- vue入口 -->
<div id="app">
    <div :class="'app-wrapper' + sidebarFlag">
        <!-- aside -->
        <div th:replace="admin/common/side"></div>

        <!-- container -->
        <el-container class="main-container">
            <!-- header -->
            <div style="background-color: rgb(84, 92, 100);" th:replace="admin/common/header"></div>
            <!-- main -->
            <el-main class="app-main">
                <el-card>
                    <h2>分类/标签管理</h2>
                    <el-row :gutter="40">
                        <el-col :xs="24" :sm="12" :lg="12" :span="12" style="padding: 10px 20px">
                            <el-card class="card-category">
                                <div slot="header">
                                    <span>分类列表</span>
                                    <el-button type="info" @click="handleSave('category')"
                                               style="float: right;padding: 7px 1pc 6px 17px;color:#fff">添加
                                    </el-button>
                                </div>
                                <!-- 列表 -->
                                <el-table ref="category" :data="entity.category" border tooltip-effect="dark" style="width: 100%">
                                    <el-table-column prop="id" align="center" sortable label="编号" show-overflow-tooltip width="80"></el-table-column>
                                    <el-table-column align="center" prop="name" label="分类名称" width="200" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button icon="el-icon-delete" size="mini" type="danger"
                                                       @click="handleDelete('category',scope.row.id)">删除
                                            </el-button>
                                            <el-button style="margin-left:0;" size="mini" icon="el-icon-edit" type="warning" @click="handleEdit('category',scope.row.id)">编辑</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <br/>
                                <!-- 分页 -->
                                <div class="pagination">
                                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                                   :current-page="pageConf.pageCode"
                                                   :page-sizes="pageConf.pageOption"
                                                   :page-size="pageConf.pageSize"
                                                   layout="total, sizes, prev, pager, next, jumper"
                                                   :total="pageConf.totalPage">
                                    </el-pagination>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="12" :span="12" style="padding: 10px 20px">
                            <el-card class="card-tags">
                                <div slot="header">
                                    <span>标签列表</span>
                                    <el-button type="info" @click="handleSave('tags')" style="float: right;padding: 7px 1pc 6px 17px;color:#fff;">添加</el-button>
                                </div>
                                <!-- 列表 -->
                                <el-table ref="tags" :data="entity.tags" border tooltip-effect="dark" style="width: 100%">
                                    <el-table-column prop="id" align="center" sortable label="编号" show-overflow-tooltip width="80"></el-table-column>
                                    <el-table-column align="center" prop="name" label="标签名称" width="200" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button icon="el-icon-delete" size="mini" type="danger"
                                                       @click="handleDelete('tags',scope.row.id)">删除
                                            </el-button>
                                            <el-button style="margin-left:0;" size="mini" icon="el-icon-edit" type="warning" @click="handleEdit('tags',scope.row.id)">编辑</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <br/>
                                <!-- 分页 -->
                                <div class="pagination">
                                    <el-pagination background @size-change="t_handleSizeChange" @current-change="t_handleCurrentChange"
                                                   :current-page="pageConf.t_pageCode"
                                                   :page-sizes="pageConf.t_pageOption"
                                                   :page-size="pageConf.t_pageSize"
                                                   layout="total, sizes, prev, pager, next, jumper"
                                                   :total="pageConf.t_totalPage">
                                    </el-pagination>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </el-main>
        </el-container>
    </div>
    <!-- 分类添加 -->
    <el-dialog :title="'新增' + dialogFlag" :visible.sync="dialogVisible" width="30%" :append-to-body='true' :before-close="handleClose">
        <span>
            <el-input :placeholder="'请输入' + dialogFlag + '名称'" v-model="editor.name">
                <template slot="prepend">{{dialogFlag}}名称</template>
            </el-input>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleGo">确 定</el-button>
        </span>
    </el-dialog>

</div>
</body>
<div th:replace="admin/common/js"></div>
<script type="text/javascript" th:src="@{/admin/js/category.js}"></script>
</html>
